<template>
  <layout title="toast提示框">
    <layout-content title="基础使用">
      <options-list icon="menu" @click="defaultToast">弹出Toast</options-list>
    </layout-content>

    <layout-content title="带图标">
      <options-list icon="menu" @click="withIconToast">带图标Toast</options-list>
    </layout-content>
  </layout>

  <tn-toast ref="demoToast"></tn-toast>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import OptionsList from '@/components/components-option-list/index.vue'

import TnToast from '@/tuniao-ui/components/tn-toast/src/Toast.vue'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

const demoToast = ref<InstanceType<typeof TnToast>>()

// 基础使用
const defaultToast = () => {
  demoToast.value?.show({
    title: '打开成功'
  })
}

// 带图标
const withIconToast = () => {
  demoToast.value?.show({
    title: '打开成功',
    icon: 'success'
  })
}
</script>

<style lang="scss" scoped>
</style>
